import React, {useEffect, useState, useLayoutEffect} from 'react';

export default function(){
  const [text, setText] = useState('');

  /** ↓这种你点击一下会发现闪了一下*/
  /*useEffect(() => {
    console.log('useEffect');
    document.getElementById('myDiv')!.innerText = '你好';
  }, [text]);*/

  /** ↓不会闪烁，直接渲染到屏幕上的就是你好,因为在Layout后就被截胡了*/
  //↓会先于 useEffect 执行,并且此时页面还没有真正渲染,只是回流(Layout布局计算)完毕(还没有开始进行重绘)
  useLayoutEffect(() => {
    console.log('useLayoutEffect');
    document.getElementById('myDiv')!.innerText = '你好';
  }, [text]);

  return (
    <>
      <div id="myDiv">{text}</div>
      <button onClick={()=>setText('hello')}>点击</button>
    </>
  )
}

